<h4>Default</h4>
<d-tags [tags]="tagList" [displayProperty]="''" (tagDelete)="getTagValue($event)"> </d-tags>
<h4>Deletable</h4>
<d-tags
  [tags]="tagList2"
  [displayProperty]="'name'"
  [mode]="'closeable'"
  [titleProperty]="'id'"
  (tagDelete)="getTagValue($event); deleteTag($event.index)"
>
</d-tags>
<pre style="margin-top: 10px">{{ tagList2 | json }}</pre>
<h4>Custom</h4>
<d-tags [tags]="tagList_custom" [mode]="'closeable'" (tagDelete)="getTagValue($event); deleteTagCustom($event.index)">
  <ng-template let-tag="tag">
    <span class="icon-bug" style="vertical-align: text-bottom; padding-right: 2px"></span>
    <span title="{{ tag.name }}">{{ tag.name }}</span>
  </ng-template>
</d-tags>
<h4>Can be selected</h4>
<d-tags [tags]="tagList3" [displayProperty]="'name'" [mode]="'checkable'" [titleProperty]="'id'"> </d-tags>
